<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>countOccurrences</title>
    <style>
        .test-data {
            margin-bottom: 5px;
            font-size: 18px;
            color: #858489;
        }

        .select {
            width: 200px;
            padding: 4px;
        }

        .btn {
            border: 1px solid #363636;
            background-color: transparent;
            border-radius: 6px;
            padding: 8px 14px;
            color: #575757;
            cursor: pointer;
            font-size: 14px;
            letter-spacing: 2px;
        }

        .btn:hover {
            border-color: #1786ee;
            color: #1786ee;
        }
    </style>
</head>

<body>

    <div class="test-data">
        原始数据:
        <span id="test">[1, 1, 2, 1, 2, 3]</span>
    </div>
    <select id="count" placeholder="请选择需要统计的数字" class="select">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p id="res">生成结果占位文字</p>
    <button id="btn" type="button" class="btn">点击我生成统计次数</button>
    <script>
        const countOccurrences = (arr, val) =>
            arr.reduce((r, v) => (v === val ? r + 1 : r), 0);
        const $ = s => document.getElementById(s);
        const test = $('test'), btn = $('btn'), res = $('res'), count = $('count');
        let selectVal = +count.value;
        count.onchange = e => selectVal = +e.target.value;
        let data = [];
        try {
            const text = test.textContent;
            data = JSON.parse(text);
        } catch (error) {

        }
        btn.onclick = () => {
            if (Array.isArray(data) && data.length && selectVal) {
                res.textContent = `值${selectVal}在${data}中出现的次数是:${countOccurrences(data, selectVal)}`;
            }
        }
    </script>
</body>

</html>